<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<script src="../../js/getURLParam.js"></script>
		<style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>

	<body>
		<!-- 
			<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">工作日志 ( 闵DD033Q )</h1>
		</header>
		-->

		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div>

					<p style="text-indent: 22px; margin-top: 20px;">
						百公里油耗统计
					</p>
				</div>
				<div>
					<div class="chart" id="barChart" style="padding-bottom: 20px;"></div>
				</div>
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron" id="list">

				</ul>
				<div id="getmore" style="text-align: center;display: none;"><button onclick="getMoreReport()" >点击加载更多</button></div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/echarts-all.js"></script>
		<script>
			var sessionid=GetQueryString("sessionid");
			var accountid=GetQueryString("accountid");
	        var proversion=GetQueryString("proversion");
	        var vclno=GetQueryString("vclno");
	        var reportdatenow = new Date();
	        var reportdate = reportdatenow.toLocaleDateString().replace("年","-").replace("月","-").replace("日","")
	        var f = document.getElementById("list");
	        var jsondata = "";
	        var iolarr=new Array();
	        var workhourarr=new Array();
	        var perworkharr=new Array();
	        var workdatearr=new Array();
	        var li ="";
	         //list.innerHTML=reportdate.toLocaleDateString().replace("年","-").replace("月","-").replace("日","");
	      	//list.innerHTML=reportdate;
	        var count=0;
	      	getreport();
	      	function getreport(){
				mui.ajax('../../../APPIOS/vclWorkReport', {
					data: {
						param: '{"proVersion":"' + proversion + '","accountId":"' + accountid + '","sessionid":"' + sessionid + '","data":{"orgCode":"","datetime":"' + reportdate + '","vclnum":"' + vclno + '"}}'
					},
					dataType: 'jsonp', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					success: function(data) {
						var jsonObj = window.JSON.parse(data);
						f.innerHTML="data";
						if (jsonObj.resultcode == "1") {
							//获取返回数据的data
							var resultdata = jsonObj.data
							jsondata = jsonObj.data;
							if (resultdata.length > 0) {
								//获取每台设备的数据
								var table = document.getElementById("table");
								var lengt = resultdata.length;
								var j=0;
								var n=0;
								if((lengt-7)>=0){
									j=lengt-7;
									for (var i=lengt-1; i >= (lengt-7); i--) {
										li+= '<li class="mui-table-view-cell"><a class="mui-navigate-right">日期：'+resultdata[i].workdate+'<br><p>小时油耗:' + resultdata[i].peroil + 'L/h&nbsp&nbsp 油耗量：' + resultdata[i].vcloil+ 'L</p></a></li>';
										//workdatearr += jsondata[j].workdate+",";
										workdatearr[n]=jsondata[j].workdate;
										if(jsondata[j].vcloil!=null && jsondata[j].vcloil!="--" && jsondata[j].vcloil!=""){
											//iolarr += jsondata[j].vcloil+",";
											iolarr[n]=jsondata[j].vcloil;
										}else{
											//iolarr += "0,";
											iolarr[n]="0";
										}
										if(jsondata[j].worktime!=null && jsondata[j].worktime!="--" && jsondata[j].worktime!=""){
											//workhourarr+=jsondata[j].worktime+",";
											workhourarr[n]=jsondata[j].worktime;
										}else{
											//workhourarr+="0,";
											workhourarr[n]="0";
										}
										if(jsondata[j].peroil!=null && jsondata[j].peroil!="--" && jsondata[j].peroil!=""){
											//perworkharr+=jsondata[j].peroil+",";
											perworkharr[n]=jsondata[j].peroil;
										}else{
											//perworkharr+="0,";
											perworkharr[n]="0";
										}
										n++;
										j++;
										count++;
									}
								}else{
									for (var i=lengt-1; i >= 0; i--) {
										li+= '<li class="mui-table-view-cell"><a class="mui-navigate-right">日期：'+resultdata[i].workdate+'<br><p>小时油耗:' + resultdata[i].peroil + 'L/h&nbsp&nbsp 油耗量：' + resultdata[i].vcloil+ 'L</p></a></li>';
										//workdatearr += jsondata[j].workdate+",";
										workdatearr[n]=jsondata[j].workdate;
										if(jsondata[j].vcloil!=null && jsondata[j].vcloil!="--" && jsondata[j].vcloil!=""){
											//iolarr += jsondata[j].vcloil+",";
											iolarr[n]=jsondata[j].vcloil;
										}else{
											//iolarr += "0,";
											iolarr[n]="0";
										}
										if(jsondata[j].worktime!=null && jsondata[j].worktime!="--" && jsondata[j].worktime!=""){
											//workhourarr+=jsondata[j].worktime+",";
											workhourarr[n]=jsondata[j].worktime;
										}else{
											//workhourarr+="0,";
											workhourarr[n]="0";
										}
									if(jsondata[j].peroil!=null && jsondata[j].peroil!="--" && jsondata[j].peroil!=""){
										//perworkharr+=jsondata[j].peroil+",";
										perworkharr[n]=jsondata[j].peroil;
									}else{
										//perworkharr+="0,";
										perworkharr[n]="0";
									}
									n++;
									j++;
									count++;
								}
							}
							f.innerHTML=li;
							/*workdatearr=workdatearr.substring(0,workdatearr.length-1);
							iolarr=iolarr.substring(0,iolarr.length-1);
							workhourarr=workhourarr.substring(0,workhourarr.length-1);
							perworkharr=perworkharr.substring(0,perworkharr.length-1);*/
							if(lengt>7){
								document.getElementById("getmore").style.display="";
							}
							getechars();
						} else {
							f.innerHTML = "暂无数据"+resultdata.length;
						}
					} else {
						f.innerHTML = "请求出错!";
					}
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					//f.innerHTML = "error";
				}
			});
			}
			function getechars(){
			var getOption = function(chartType) {
				var chartOption = chartType == 'pie' ? {
					calculable: false,
				} : {
					legend: {
						data: ['油耗','工作小时', '小时油耗']
					},
					grid: {
						x: 50,
						x2: 60,
						y: 50,
						y2: 25
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: false
							},
							dataView: {
								show: false,
								readOnly: false
							},
							magicType: {
								show: false,
								type: ['line', 'bar']
							},
							restore: {
								show: false
							},
							saveAsImage: {
								show: false
							}
						}
					},
					calculable: false,
					xAxis: [{
						type: 'category',
						//data: ['3-15', '3-16', '3-17', '3-18', '3-19', '3-20', '3-21']
						data: [workdatearr[0],workdatearr[1],workdatearr[2],workdatearr[3],workdatearr[4],workdatearr[5],workdatearr[6]]
					}],
					yAxis: [{
						type: 'value',
						name: '油耗',
						min: 0,
						max: 250,
						interval: 50,
						axisLabel: {
							formatter: '{value}'
						}
					}, {
						type: 'value',
						name: '小时油耗',
						min: 0,
						max: 100,
						interval: 20,
						axisLabel: {
							formatter: '{value}'
						}
					}],
					series: [
						{
							name: '油耗',
							type: 'bar',
							//data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
							data: [iolarr[0],iolarr[1],iolarr[2],iolarr[3],iolarr[4],iolarr[5],iolarr[6]]
						},
						{
							name: '工作小时',
							type: 'bar',
							//data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
							data: [workhourarr[0],workhourarr[1],workhourarr[2],workhourarr[3],workhourarr[4],workhourarr[5],workhourarr[6]]
						},
						{
							name: '小时油耗',
							type: 'line',
							yAxisIndex: 1,
							//data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3]
							data: [perworkharr[0],perworkharr[1],perworkharr[2],perworkharr[3],perworkharr[4],perworkharr[5],perworkharr[6]]
						}
					]
				};
				return chartOption;
			};
			var byId = function(id) {
				return document.getElementById(id);
			};
			var barChart = echarts.init(byId('barChart'));
			
				barChart.setOption(getOption('bar'));
				//document.getElementById("dd").innerHTML=da;
			}
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					}
				
				}
			});
			var count = 0;
			/** 
			 * 上拉加载具体业务实现 
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count >= jsondata.length)); //参数为true代表没有更多数据了。  
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = cells.length+5; i < len; i++) {
						if (i<jsondata.length) {
							var li = document.createElement('li');
							li.className = 'mui-table-view-cell';
							li.innerHTML = '<a class="mui-navigate-right">日期：'+resultdata[i].workdate+'<br><p>小时油耗:' + resultdata[i].peroil + 'L/h&nbsp&nbsp 油耗量：' + resultdata[i].vcloil+ 'L</p></a>';
						table.appendChild(li);
							}
							}
							}, 1000);
					}

			function getMoreReport() {
				//document.getElementById("getmore").innerHTML=li;
				//document.getElementById("getmore").innerHTML="aa";
				//var table = document.body.querySelector('.mui-table-view');
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				for (var i = cells.length; i < jsondata.length; i++) {
					li+= '<li class="mui-table-view-cell"><a class="mui-navigate-right">日期：'+jsondata[i].workdate+'<br><p>小时油耗:' + jsondata[i].peroil + 'L/h&nbsp&nbsp 油耗量：' + jsondata[i].vcloil+ 'L</p></a></li>';
				}
				f.innerHTML=li;
				document.getElementById("getmore").style.display="none";
			}/*if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 1000);
				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}*/
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				
				//mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
				setTimeout(function() {
					getreport();
					
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}
		</script>
	</body>

</html>